{% extends "base_tabler.html" %} {% block title %}角色管理{% endblock %} {% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">角色管理</h2>
        <div class="text-muted mt-1">共 {{ total_groups }} 个角色</div>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{% url 'add_role' %}" class="btn btn-primary d-none d-sm-inline-block">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
            添加角色
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-body">
  <div class="container-xl">
    <div class="card">
      <div class="card-body">
        <div class="d-flex">
          <div class="ms-auto">
            <form action="{% url 'role_manage' %}" method="get" class="mb-3">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="搜索角色..." name="q" value="{{ search_query }}" />
                <button class="btn btn-outline-secondary" type="submit">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="icon icon-tabler icon-tabler-search"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    stroke-width="2"
                    stroke="currentColor"
                    fill="none"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
                    <path d="M21 21l-6 -6"></path>
                  </svg>
                </button>
              </div>
            </form>
          </div>
        </div>

        <div class="table-responsive">
          <table class="table table-vcenter card-table">
            <thead>
              <tr>
                <th>角色名称</th>
                <th>权限数量</th>
                <th>用户数量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {% for group in page_obj %}
              <tr>
                <td>{{ group.name }}</td>
                <td>
                  <span class="badge bg-blue">{{ group.permissions.count }}</span>
                </td>
                <td>
                  <span class="badge bg-green">{{ group.user_set.count }}</span>
                </td>
                <td>
                  <div class="btn-list flex-nowrap">
                    <a href="{% url 'edit_role' group.id %}" class="btn btn-sm btn-primary"> 编辑 </a>
                    <button
                      type="button"
                      class="btn btn-sm btn-danger"
                      data-bs-toggle="modal"
                      data-bs-target="#modal-delete-role"
                      data-role-id="{{ group.id }}"
                      data-role-name="{{ group.name }}"
                    >
                      删除
                    </button>
                  </div>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="4" class="text-center">暂无角色数据</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        {% if page_obj.has_other_pages %}
        <div class="card-footer d-flex align-items-center">
          <ul class="pagination m-0 ms-auto">
            {% if page_obj.has_previous %}
            <li class="page-item">
              <a
                class="page-link"
                href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M15 6l-6 6l6 6" />
                </svg>
                上一页
              </a>
            </li>
            {% endif %} {% for i in page_obj.paginator.page_range %} {% if page_obj.number == i %}
            <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
            {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
            <li class="page-item">
              <a class="page-link" href="?page={{ i }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ i }}</a>
            </li>
            {% endif %} {% endfor %} {% if page_obj.has_next %}
            <li class="page-item">
              <a
                class="page-link"
                href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}"
              >
                下一页
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="icon"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  stroke-width="2"
                  stroke="currentColor"
                  fill="none"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M9 6l6 6l-6 6" />
                </svg>
              </a>
            </li>
            {% endif %}
          </ul>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- 删除角色确认模态框 -->
<div class="modal modal-blur fade" id="modal-delete-role" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="modal-title">确认删除角色</div>
        <div>您确定要删除角色 <span id="delete-role-name" class="fw-bold"></span> 吗？此操作不可恢复。</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">取消</button>
        <form id="delete-role-form" method="post">
          {% csrf_token %}
          <button type="submit" class="btn btn-danger">确认删除</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // 删除角色模态框处理
    const deleteRoleModal = document.getElementById("modal-delete-role")
    deleteRoleModal.addEventListener("show.bs.modal", function (event) {
      const button = event.relatedTarget
      const roleId = button.getAttribute("data-role-id")
      const roleName = button.getAttribute("data-role-name")

      document.getElementById("delete-role-name").textContent = roleName
      document.getElementById("delete-role-form").action = "{% url 'delete_role' 0 %}".replace("0", roleId)
    })
  })
</script>
{% endblock %}
